<template>
  <div class="dashboard-container">
    <div class="app-container">
      <!-- 具名插槽：在commponents/Pagetool里 -->
      <PageTool :show-before="false">
        <!-- 控制按钮的显示和隐藏 -->
        <template v-slot:after>
          <el-button type="primary" size="small" @click="addEmployee">+添加角色</el-button>
        </template>
      </PageTool>
      <!-- 表格 -->
      <el-card>
        <el-table :model="ruleForm" border :data="employeeList">
          <el-table-column label="用户名" prop="username" />
          <el-table-column label="邮箱" prop="email" />
          <el-table-column label="操作">
            <template v-slot="{row}">
              <el-button type="primary">设置角色</el-button>
              <el-button @click="edit(row.id)">编辑</el-button>
              <el-button type="danger" @click="del(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页器：表格后面 -->
        <el-row type="flex" justify="center">
          <el-pagination
            layout="total,prev, pager, next"
            :total="total"
            :page-size="employee._limit"
            @current-change="currentChange"
          />
        </el-row>
      </el-card>
      <!-- 新增员工组件 -->
      <AddEmployee
        :show-dialog.sync="visibleDialog"
        @updateEvent="userList"
      />
    </div>-
  </div>
</template>
<script>
import { userList, getTotal, delEmployee, getPermission } from '@/api/employee'
import AddEmployee from './components/addEmployee.vue'
export default {
  components: { AddEmployee },
  data() {
    return {
      employeeList: [], // 员工列表数据
      // 员工参数、
      employee: {
        _limit: 5, // 每页请求的数量
        _start: 0 // 开始获取的位置
      },
      total: 0, // 员工总数量
      visibleDialog: false, // 默认隐藏
      ruleForm: {
        username: '', // 用户名
        email: '', // 邮箱
        password: '' // 密码
      }
    }
  },
  created() {
    this.userList()
  },
  methods: {
    // 编辑员工
    async edit(id) {
      console.log(65, id)
      this.visibleDialog = true
      // 调用详情接口
      const res = await getPermission(id)
      console.log(69, res)
      // 保存数据再formData里面即可实现回显
      this.ruleForm = res.data.data
      this.$emit('bianJi', this.ruleForm)
    },
    // 删除
    del(id) {
      console.log(95, id)
      this.$confirm('确定删吗', '提示', {
        type: 'warning'
      }).then(async() => {
        console.log('确定')
        await delEmployee(id)
        // 判断表格的数据不是最后一条，并且页码不是第一页
        if (this.employeeList.length === 1 && this._start !== 1) {
          // 数据减1
          this._start--
        }
        // // 更新列表
        this.userList()
      }).catch(err => {
        console.log('取消', err)
      })
    },
    // 新增员工
    addEmployee() {
      this.visibleDialog = true
    },
    // 获取员工列表
    async userList() {
      const res = await userList(this.employee)
      this.employeeList = res.data // 员工列表数据
      // console.log(68, res)
      // 员工总数量
      const total = await getTotal()
      this.total = total.data
      // console.log(57, total)
    },
    // 分页 页码发生改变时触发
    currentChange(_start) {
      this.employee._start = _start
      this.userList()
    }
  }
}
</script>
<style>

</style>
